---
title: Material Tailwind with Next.js - Installation Guide
description: Learn how to use Material Tailwind components with Next.js and Tailwind CSS to easily create elegant and flexible pages.
github: guide/next
prev: docs/react/migration/v3
next: docs/react/guide/remix
---

# Material Tailwind with Next.js

Learn how to setup and install `@material-tailwind/react` with Next.js.

---

## Creating a Next.js Project

First, create a new Next.js project using the command below, it will create a new Next.js project with Tailwind CSS installed and configured.

For more details check the <Link href="https://nextjs.org/docs/getting-started/installation?ref=material-tailwind" target="_blank">Next.js Official Documentation</Link>.

<CodePreview>
```bash
npx create-next-app@latest --tailwind
```
</CodePreview>

---

## Install Material Tailwind

Once you have created your Next.js project, you need to install `@material-tailwind/react` by running the following command:

<CodePreview>
```bash
npm i @material-tailwind/react@beta
```
</CodePreview>

---

## Add Plugin and Template Path

Once you installed `@material-tailwind/react` you need to add `mtConfig` and the template path to your `tailwind.config.ts` file.

<CodePreview>
```ts
import type { Config } from "tailwindcss";
import { mtConfig } from "@material-tailwind/react";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {...},
  plugins: [mtConfig],
};

export default config;
```
</CodePreview>

---

## Example

Now you're ready to use Material Tailwind components in your Next.js project. Here's an example of how to use the `Button` component:

<OldComponentPreview demo={<Button.ButtonDemo />}>
```tsx
import { Button } from "@material-tailwind/react";

export default function Page() {
  return <Button>Button</Button>
}
```
</OldComponentPreview>